<template>
  <div>
    <div class="header_nav">
      <div
        class="card_list"
        @click="CutTab(1)"
        :class="currentIndex === 1 ? 'active' : ''"
      >
        次卡列表
      </div>
      <div
        class="card_type"
        @click="CutTab(2)"
        :class="currentIndex === 2 ? 'active' : ''"
      >
        次卡类型
      </div>
    </div>

    <!-- 次卡列表 -->
    <div v-show="this.currentIndex === 1">
      <div class="header_search_nav search_form">
        <div class="ipt_left">
          <el-form ref="queryForm" :model="queryParams" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="次卡名称" prop="cardName">
                  <el-input
                    class="w-200"
                    v-model="queryParams.cardName"
                    placeholder="请输入次卡名称"
                    @keyup.enter.native="handleQuery"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="次卡状态" prop="useStatus">
                  <el-select
                    class="w-200"
                    v-model="queryParams.useStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in CardStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div class="btn_right">
          <button class="btn1" @click="handleQuery">筛选</button>
          <button class="btn2" @click="resetQuery">重置</button>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="table_card">
        <!-- 上部分 title -->
        <div class="table_card_top">
          <span class="solid_left"></span>
          <div class="table_card_title">次卡列表</div>
          <div class="op_right">
            <button class="primary_button" @click="publishCard">
              发布次卡
            </button>
          </div>
        </div>

        <div class="table_list">
          <el-table :data="CardData" stripe style="width: 100%">
            <el-table-column prop="reorder" label="次卡排序" width="300px">
            </el-table-column>
            <el-table-column
              prop="minorCardTypeName"
              label="次卡类型"
              width="300px"
            >
            </el-table-column>
            <el-table-column prop="cardName" label="次卡名称">
            </el-table-column>
            <el-table-column prop="storeItemName" label="抵扣项目">
            </el-table-column>
            <el-table-column prop="amount" label="次卡计费金额（元）">
            </el-table-column>
            <el-table-column prop="useStatus" label="次卡状态">
              <template slot-scope="scope">
                {{ CardStatusObj[scope.row.useStatus] }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="Edit(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  :disabled="
                    scope.row.useStatus === 0 || scope.row.useStatus === '0'
                      ? true
                      : false
                  "
                  @click="Takedown(scope.row, 0)"
                >
                  <span class="separate_left">|</span> 上架<span
                    class="separate_right"
                    >|</span
                  ></el-button
                >

                <el-button
                  size="mini"
                  type="text"
                  :disabled="
                    scope.row.useStatus === 1 || scope.row.useStatus === '1'
                      ? true
                      : false
                  "
                  @click="Takedown(scope.row, 1)"
                >
                  下架</el-button
                >

                <el-button size="mini" type="text" @click="DelSort(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>

        <!-- 新建次卡 -->
        <el-dialog
          :title="title"
          :visible.sync="newCarddialogVisible"
          width="500px"
          :before-close="CancelSubmit"
          class="no-dialog-padding"
        >
          <span>
            <div class="CardForm">
              <el-form
                ref="newCardForm"
                :rules="newCardRules"
                :model="newCardForm"
              >
                <el-row :gutter="40">
                  <el-col>
                    <el-form-item label="次卡名称" prop="cardName">
                      <el-input
                        class="w-100"
                        v-model="newCardForm.cardName"
                        placeholder="请输入次卡名称"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="次卡排序" prop="reorder">
                      <el-input-number
                        class="w-100 text-left"
                        v-model="newCardForm.reorder"
                        placeholder="请输入次卡排序"
                        :min="0"
                        :step="1"
                        :precision="0"
                        :controls="false"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="次卡类型" prop="minorCardTypeId">
                      <el-select
                        v-model="newCardForm.minorCardTypeId"
                        placeholder="请选择次卡类型"
                        class="w-100"
                      >
                        <el-option
                          v-for="item in cardTypeList"
                          :key="item.minorCardTypeId"
                          :label="item.minorCardTypeName"
                          :value="item.minorCardTypeId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col>
                    <el-form-item label="抵扣项目" prop="storeItemId">
                      <el-select
                        v-model="newCardForm.storeItemId"
                        placeholder="请选择抵扣项目"
                        class="w-100"
                      >
                        <el-option
                          v-for="item in getItemList"
                          :key="item.itemId"
                          :label="item.itemName"
                          :value="item.itemId"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item label="次卡计费金额（元）" prop="amount">
                      <el-input-number
                        v-model="newCardForm.amount"
                        placeholder="请输入次卡计费金额"
                        :precision="2"
                        :controls="false"
                        :min="0"
                        class="w-100 text-left"
                      ></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button class="cancel_btn" @click="CancelSubmit"
              >取 消</el-button
            >
            <el-button type="primary" @click="ClientSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <!-- 次卡类型 -->
    <div v-show="this.currentIndex === 2">
      <div>
        <div class="table_card">
          <div class="table_card_top">
            <span class="solid_left"></span>
            <div class="table_card_title">次卡类型</div>
            <div class="op_right">
              <button class="primary_button" @click="NewSource">
                新增分类
              </button>
            </div>
          </div>

          <div class="table_cardType">
            <el-table :data="cardTypeList" stripe style="width: 100%">
              <el-table-column
                prop="minorCardTypeName"
                label="分类名称"
                width="300px"
              >
              </el-table-column>
              <el-table-column
                prop="minorCardTypeDesc"
                label="备注"
              ></el-table-column>
              <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="EditSource(scope.row)"
                    >编辑</el-button
                  >
                  <span class="separate_right">|</span>
                  <el-button
                    size="mini"
                    type="text"
                    @click="DelCard(scope.row.minorCardTypeId)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- <pagination
              :total="total"
              :page.sync="queryParams.pageNo"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            /> -->
          </div>

          <!-- 新增分类 -->
          <el-dialog
            :visible.sync="cardTypedialogVisible"
            width="400px"
            :title="title"
            class="no-dialog-padding"
            @close="CardTypeSubmit"
          >
            <span>
              <div class="source_box">
                <el-form
                  ref="cardTypeForm"
                  :rules="cardTypeRules"
                  :model="cardTypeForm"
                >
                  <el-row>
                    <el-col>
                      <el-form-item label="分类名称" prop="minorCardTypeName">
                        <el-input
                          class="w-100"
                          v-model="cardTypeForm.minorCardTypeName"
                          placeholder="请输入分类名称"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-form-item label="分类备注" prop="minorCardTypeDesc">
                      <el-input
                        type="textarea"
                        placeholder="请输入分类备注"
                        v-model="cardTypeForm.minorCardTypeDesc"
                        maxlength="30"
                        :rows="4"
                        show-word-limit
                      />
                    </el-form-item>
                  </el-row>
                </el-form>
              </div>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button class="cancel_btn" @click="CardTypeSubmit"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="cardSubmit"
                :loading="cardTypeLoading"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import {
  getCardList,
  CreateCardManger,
  UpdateCardManger,
  updateStatus,
  DeleteCard,
} from "@/api/business/Subcard";
import { itemAllList } from "@/api/business/stores";
import {
  getAllCardType,
  CreateCardType,
  updateCardType,
  DeleteCardType,
} from "@/api/business/Subcard";
export default {
  name: "EryuoaStoreCard",

  data() {
    return {
      newCarddialogVisible: false,
      textarea: "",
      title: "",
      CardData: [],
      getItemList: [], // 抵扣项目列表

      currentIndex: 1,

      CardStatusOptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "上架",
        },
        {
          value: "1",
          label: "下架",
        },
      ],

      CardStatusObj: {
        0: "上架",
        1: "下架",
      },

      options: [
        {
          value: "1",
          label: "SPA",
        },
      ],

      newCardRules: {
        cardName: [
          { required: true, message: "请输入次卡名称", trigger: "blur" },
        ],
        reorder: [{ required: true, message: "请输入排序号", trigger: "blur" }],
        minorCardTypeId: [
          { required: true, message: "请选择次卡类型", trigger: "change" },
        ],
        storeItemId: [
          { required: true, message: "请选择抵扣项目", trigger: "change" },
        ],
        amount: [
          { required: true, message: "请输入次卡计费金额", trigger: "blur" },
        ],
      },

      newCardForm: {
        cardName: "",
        reorder: "",
        minorCardTypeId: "",
        storeItemId: "",
        amount: "",
      },
      value: "",
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        cardName: "",
        useStatus: null,
      },
      total: 0,

      cardTypedialogVisible: false,
      loading: false,

      cardTypeList: [], // 次卡类型列表
      title: "",

      cardTypeLoading: false,

      cardTypeForm: {
        minorCardTypeId: "",
        minorCardTypeDesc: "",
        minorCardTypeName: "",
      },

      cardTypeRules: {
        minorCardTypeName: [
          { required: true, message: "请输入来源名称", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  created() {
    this.getList();
  },

  methods: {
    CutTab(i) {
      this.currentIndex = i;
      if (this.currentIndex === 1) {
        this.getList();
      } else if (this.currentIndex === 2) {
        this.getTypeList();
      }
    },

    CancelSubmit() {
      this.resetFormData("newCardForm");
      this.newCardForm.cardId = "";
      this.$nextTick(() => {
        this.newCarddialogVisible = false;
      });
    },

    // 列表 下架
    Takedown(row, useStatus) {
      this.$confirm(
        "该次卡是否确认" + (useStatus === 0 ? "上架" : "下架") + "?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          updateStatus({
            cardId: row.cardId,
            useStatus: useStatus,
          }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("queryForm");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      console.log(this.$refs[formName]);
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    },

    // 次卡列表
    getList() {
      this.loading = true;
      getCardList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.CardData = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 新建商品 弹框 确认
    ClientSubmit() {
      this.$refs["newCardForm"].validate((valid) => {
        if (valid) {
          if (!this.newCardForm.cardId) {
            this.Createcard();
          } else {
            this.Updatecard();
          }
        } else {
          // console.log("error submit!!");
          // return false;
        }
      });
    },

    publishCard() {
      this.newCarddialogVisible = true;
      this.title = "新建次卡";
      this.getItem();
      this.getTypeList();
    },

    // 获取抵扣项目
    getItem() {
      itemAllList()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.getItemList = data;
          }
        })
        .catch((err) => {});
    },

    // 新建次卡
    Createcard() {
      // let goodItem = JSON.parse(JSON.stringify(this.newCardForm));
      // goodItem.storeId = getStoreId();
      CreateCardManger(this.newCardForm)
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$modal.msgSuccess("操作成功");
            this.CancelSubmit();
          }
        })
        .catch((err) => {});
    },

    // 编辑次卡
    Updatecard() {
      const {
        cardName,
        reorder,
        storeItemId,
        amount,
        minorCardTypeId,
        cardId,
        useStatus,
      } = this.newCardForm;
      UpdateCardManger({
        cardName: cardName,
        reorder: reorder,
        storeItemId: storeItemId,
        useStatus: useStatus,
        amount: amount,
        minorCardTypeId:minorCardTypeId,
        cardId: cardId,
      })
        .then((res) => {
          const { code } = res;
          if (code === 0) {
            this.getList();
            this.$modal.msgSuccess("操作成功");
            this.CancelSubmit();
          }
        })
        .catch((err) => {});
    },

    // 编辑商品
    Edit(row) {
      this.newCarddialogVisible = true;
      this.title = "编辑次卡";
      this.getItem();
      this.getTypeList();
      this.$nextTick(() => {
        const item = JSON.parse(JSON.stringify(row));
        this.newCardForm = item;
      });
    },

    // 商品列表 删除
    DelSort(row) {
      this.DeleteSort(row);
    },

    DeleteSort(row) {
      const cardId = row.cardId;
      this.$confirm("次卡删除后无法撤销, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteCard({ cardId: cardId }).then((res) => {
            const { code } = res;
            if (code === 0) {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {});
    },

    // 卡
    // 次卡类型列表
    getTypeList() {
      this.loading = true;
      getAllCardType({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.cardTypeList = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CardTypeSubmit() {
      this.cardTypeForm.minorCardTypeId = "";
      this.$refs["cardTypeForm"].resetFields();
      this.cardTypeForm = {
        id: "",
        name: "",
        remark: "",
      };

      this.cardTypeLoading = false;
      this.$nextTick(() => {
        this.cardTypedialogVisible = false;
      });
    },

    cardSubmit() {
      this.$refs["cardTypeForm"].validate((valid) => {
        if (valid) {
          if (this.cardTypeLoading) {
            return false;
          }

          if (!!this.cardTypeForm.minorCardTypeId) {
            this.UpdateCardType();
          } else {
            this.NewAddCardType();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //
    NewSource() {
      this.cardTypedialogVisible = true;
      this.title = "新增分类";
      // 客户来源数据
    },

    // 新建分类 按钮
    NewAddCardType() {
      this.cardTypeLoading = true;
      CreateCardType(this.cardTypeForm)
        .then((res) => {
          this.cardTypeLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.getTypeList();
            this.CardTypeSubmit();
            this.$modal.msgSuccess("操作成功");
          }
        })
        .catch((err) => {
          this.cardTypeLoading = false;
        });
    },

    // 编辑来源 按钮
    UpdateCardType() {
      let cardTypeForm = JSON.parse(JSON.stringify(this.cardTypeForm));
      const { minorCardTypeId, minorCardTypeName, minorCardTypeDesc } =
        cardTypeForm;
      this.cardTypeLoading = true;
      updateCardType({
        minorCardTypeId: minorCardTypeId,
        minorCardTypeName: minorCardTypeName,
        minorCardTypeDesc: minorCardTypeDesc,
      })
        .then((res) => {
          this.cardTypeLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.getTypeList();
            this.CardTypeSubmit();
            this.$modal.msgSuccess("操作成功");
          }
        })
        .catch((err) => {
          this.cardTypeLoading = false;
        });
    },

    // 编辑来源
    EditSource(row) {
      this.cardTypedialogVisible = true;
      this.title = "编辑来源";
      this.cardTypeForm = JSON.parse(JSON.stringify(row));
    },

    // 删除来源
    DelCard(minorCardTypeId) {
      this.$confirm("来源删除后将无法撤回, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteCardType({ id: minorCardTypeId })
            .then((res) => {
              const { code, data } = res;
              if (code === 0) {
                this.getTypeList();
                this.$modal.msgSuccess("操作成功");
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
};
</script>
    
<style lang="scss" scoped>
.goodTop {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  padding-left: 16px;
  .good_list {
    margin-right: 32px;
  }

  .good_active {
    color: #0052d9;
    border-bottom: 1px solid #0052d9;
  }
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin: 0 12px;
}
.CardForm {
  padding: 0 24px;
}

.header_nav {
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  display: flex;
  text-align: center;
  font-size: 16px;
  margin: 0 24px;
  .card_list {
    width: 120px;
    &.active {
      color: #0052d9;
    }
  }
  .card_type {
    width: 120px;
    &.active {
      color: #0052d9;
    }
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.source_box {
  margin: 0 24px;
}
.table_cardType {
  padding: 0 24px 24px 24px;
}
</style>